<template>
	<view class="main">
		<view class="mt">
			<view class="mtc">
				<view class="mtcn">{{dept.name}}</view>
				<view class="mtcc">
					<view class="mtcd">{{dept.info}}</view>
					<view @click="openModal">
						<uv-icon name="play-right-fill" color="#fff" size="22"></uv-icon>
					</view>
				</view>
			</view>
			<view class="mtp">
				<uv-icon name="map-fill" color="#fff" size="22"></uv-icon>
				科室位置：{{dept.pos}}
			</view>
		</view>
		<view class="mm">
			<uv-tabs :list="dateList" lineColor='#2c9b94' @change="changeTab" :activeStyle="{'color':'#2c9b94'}"
				lineWidth="60"></uv-tabs>
		</view>
		<view class="md">
			<view class="mdi" v-for="(i,o) in doctorList" :key="o" @click="openDoctorDate(i.id)">
				<img :style="{backgroundColor:i.img?'':'#eee'}"
					:src="i.img||'https://www.ysrs.xyz/apiI/ll/file/preview/1743090725920ff80808195d597d90195d84db4200013.png'"
					alt="" />
				<view class="mdic">
					<view class="mdict">
						<view>
							<view class="mdictn">{{i.name}}</view>
							<view class="mdictz">{{i.zhicheng}}</view>
						</view>
						<view class="mdictp" v-if="mainType == 2">￥{{i.price.toFixed(2)}}</view>
						<view :class="['mdictb',i.shengyu == 0 ? 'mdictbA':'']">{{i.shengyu == 0 ?'无号':`剩余:${i.shengyu}`}}</view>
					</view>
					<view class="mdice">{{i.shangchang}}</view>
				</view>
			</view>
		</view>

		<uv-modal ref="modal" title="科室介绍" :closeOnClickOverlay="false">
			<view class="slot-content">
				<view style="text-indent: 2em;">{{dept.info}}</view>
			</view>
		</uv-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dept: {
					name: '消化科',
					info: '肥胖作为一种慢性疾病，合并症与并发症繁多。市面上减重治疗方法多样，信息繁杂，患者在没有专业知识背景的情况下很难选择。为了更好地整合资源、服务患者。我院内分泌科牵头开设肥胖诊疗门诊，建立完善的中西医结合、多科联合、医护联合及线上管理服务模式，以满足患者个性化需求。给予患者病因、合并症及并发症筛查，配备有新型人体成分分析仪，结合患者特点给予个体化饮食、运动指导，必要时药物干预，中医穴位埋线等，建立规范的个人管理档案，定期回访跟进。面向超重或肥胖及合并各类疾病的患者，力求为患者“量体裁衣”，制定最合适的减重方案。',
					pos: '门急诊楼东区八楼三高门诊'
				},
				dateList: [],
				mainType: null,
				doctorList: [{
						name: '张大师',
						zhicheng: '主任医师',
						id: 1,
						price: 20,
						shengyu: 0,
						img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
						shangchang: '擅长:过敏性疾病及免疫相关皮肤病的诊治，对湿疹、荨麻疹、特应性皮炎、银屑病、脂溢性皮炎、白癜风、斑秃、天疱疮、类天疱疮、痤疮、皮肌炎、红斑狼疮、硬皮病、扁平苔藓等有丰富的临床经验，对性传播疾病:梅毒、尖锐湿疣、生殖器疱疹的诊治有丰富的经验。对皮肤科罕见病及遗传性疾病的诊治经验丰富。'
					},
					{
						name: '张大师',
						zhicheng: '主任医师',
						price: 20,
						id: 2,
						shengyu: 5,
						img: '',
						shangchang: '擅长:过敏性疾病及免疫相关皮肤病的诊治，对湿疹、荨麻疹、特应性皮炎、银屑病、脂溢性皮炎、白癜风、斑秃、天疱疮、类天疱疮、痤疮、皮肌炎、红斑狼疮、硬皮病、扁平苔藓等有丰富的临床经验，对性传播疾病:梅毒、尖锐湿疣、生殖器疱疹的诊治有丰富的经验。对皮肤科罕见病及遗传性疾病的诊治经验丰富。'
					}
				]
			}
		},
		onLoad(o) {
			// o.id
			this.mainType = o.type
			uni.setNavigationBarTitle({
				title: this.dept.name
			})
			if (this.$moment().format('HH') > 18) {
				for (let i = 1; i < 16; i++) {
					this.dateList.push({
						name: this.$moment().add(i, 'd').format('MM-DD'),
						week: this.$moment().add(i, 'd').format('dddd')
					})
				}
			} else {
				for (let i = 0; i < 15; i++) {
					this.dateList.push({
						name: this.$moment().add(i, 'd').format('MM-DD'),
						week: this.$moment().add(i, 'd').format('dddd')
					})
				}
			}
		},
		methods: {
			changeTab(index) {
				console.log(index)
			},
			openDoctorDate(id) {
				uni.navigateTo({
					url: `/pages/AppointmentRegistration/chooseDoctorDate?type=${this.mainType}&id=${id}`
				})
			},
			openModal() {
				this.$refs.modal.open();
			}
		}
	}
</script>

<style scoped lang="scss">
	.main {
		min-height: 100vh;
		background-color: #f5f5f5;

		.mt {
			background: linear-gradient(to right, #12aceecc, #2c9b94ee);
			color: #fff;
			padding: 20rpx 30rpx;

			.mtc {
				.mtcn {
					font-size: 35rpx;
					text-align: center;
					letter-spacing: 10rpx;
				}

				.mtcc {
					display: flex;
					margin: 20rpx 0;
					align-items: center;
					justify-content: space-between;

					.mtcd {
						text-indent: 2em;
						font-size: 30rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						margin-right: 10rpx;
					}
				}

			}

			.mtp {
				display: flex;
				align-items: center;
			}
		}

		.mm {
			margin: 20rpx 0;
			background-color: #fff;
		}

		.md {
			background-color: #fff;
			border-radius: 22rpx 22rpx 0 0;
			padding: 20rpx 30rpx;

			.mdi {
				display: flex;
				padding: 20rpx 0;
				margin-bottom: 20rpx;
				border-bottom: 1px dashed #eee;

				img {
					width: 120rpx;
					height: 140rpx;
					border-radius: 22rpx;
					margin-right: 30rpx;
				}

				.mdic {
					width: calc(100% - 150rpx);

					.mdict {
						display: flex;
						align-items: center;
						margin-bottom: 10rpx;
						position: relative;
						color: #666;

						.mdictn {
							color: #000;
							font-weight: bold;
							font-size: 33rpx;
							margin-bottom: 10rpx;
						}

						.mdictp {
							position: absolute;
							right: 170rpx;
							color: #f00;
						}

						.mdictb {
							width: 130rpx;
							height: 60rpx;
							line-height: 60rpx;
							text-align: center;
							border-radius: 12rpx;
							color: #fff;
							background-color: #2c9b94;
							position: absolute;
							right: 20rpx;
							font-size: 28rpx;
						}

						.mdictbA {
							background-color: #999;
						}
					}

					.mdice {
						overflow: hidden;
						font-size: 28rpx;
						color: #555;
						line-height: 50rpx;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						margin-right: 10rpx;
					}
				}
			}
		}
	}

	/deep/.uv-tabs__wrapper__nav__item {
		flex-direction: column !important;
		height: 100rpx !important;
	}

	/deep/.uv-tabs__wrapper__nav__item__text1 {
		margin: 6rpx 0 10rpx 0;
	}
</style>